<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>View Order</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>

</head>
<body>
    <div th:replace="common/Top"></div>

    <div id="Content">
        <div id="BackLink">
            <a href="/catalog/view">Return to Main Menu</a>
        </div>

        <div id="Catalog">
            <table>
                <tr>
                    <th align="center" colspan="2" th:text="|Order ${session.order.orderId} ${#dates.format(session.order.orderDate, 'yyyy/MM/dd hh:mm:ss')}|"></th>
                </tr>
                <tr>
                    <th colspan="2">Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td th:text="${session.order.cardType}"></td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td th:text="${session.order.creditCard}"></td>
                </tr>
                <!--           罪魁祸首-->
                <!--            <tr>-->
                <!--                <td>Expiry Date (YYYY/MM/DD):</td>-->
                <!--                <td th:text="${#dates.format(session.order.expiryDate, 'yyyy/MM/dd')}"></td>-->
                <!--            </tr>-->

                <tr>
                    <th colspan="2">Billing Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td th:text="${session.order.billToFirstName}"></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td th:text="${session.order.billToLastName}"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td th:text="${session.order.billAddress1}"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td th:text="${session.order.billAddress2}"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td th:text="${session.order.billCity}"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td th:text="${session.order.billState}"></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td th:text="${session.order.billZip}"></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td th:text="${session.order.billCountry}"></td>
                </tr>
                <tr>
                    <th colspan="2">Shipping Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td th:text="${session.order.shipToFirstName}"></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td th:text="${session.order.shipToLastName}"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td th:text="${session.order.shipAddress1}"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td th:text="${session.order.shipAddress2}"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td th:text="${session.order.shipCity}"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td th:text="${session.order.shipState}"></td>
                </tr>

                <tr>
                    <td>Zip:</td>
                    <td th:text="${session.order.shipZip}"></td>
                </tr>

                <tr>
                    <td>Country:</td>
                    <td th:text="${session.order.shipCountry}"></td>
                </tr>

                <tr>
                    <td>Courier:</td>
                    <td th:text="${session.order.courier}"></td>
                </tr>
                <tr>
                    <td>Status:</td>
                    <td colspan="2" th:text="${session.order.status}"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table>
                            <tr>
                                <th>Item ID</th>
                                <th>Description</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Total Cost</th>
                            </tr>
                            <tr th:each="cartItem:${session.order.cartItems}">
                                <td>
                                    <a href="@{/catalog/viewItem?itemId={itemId}(itemId=${cartItem.itemId})}" th:text="${cartItem.itemId}"></a>
                                </td>
                                <td>
                                    <span th:if="${cartItem != null}" th:text="${cartItem.descn}"></span>
                                    <span th:if="${cartItem == null}">
                                    <i>{description unavailable}</i>
                                </span>
                                </td>

                                <td th:text="${cartItem.quantity}"></td>
                                <td th:text="'$'+${#numbers.formatDecimal(cartItem.listPrice,0,'COMMA',2,'POINT')}"></td>
                                <td th:text="'$'+${#numbers.formatDecimal(cartItem.totalPrice,0,'COMMA',2,'POINT')}"></td>
                            </tr>
                            <tr>
                                <th colspan="5">
                                    Total: <span th:text="'$'+${#numbers.formatDecimal(session.order.totalPrice,0,'COMMA',2,'POINT')}"></span>
                                </th>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>

            <div id="payHref">
                <a href="/pay">pay</a>
            </div>

        </div>
    </div>

    <div th:replace="common/Bottom"></div>
</body>
</html>